<div class="container">
  <div class="row">
    <div class="col s12 m9 l10">

      <!--  Introduction Section  -->
      <div id="introduction" class="scrollspy section">
        <h4>Introduction</h4>
        <p class="caption">Our Carousel is a robust and versatile component that can be an image slider, to an item carousel, to an onboarding experience. It is touch enabled making it especially smooth to use on mobile.</p>
         <p>Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.</p><br>

        <div class="carousel">
          <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
          <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
          <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
          <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
          <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
        </div><br>

      <pre><code class="language-markup">
  &lt;div class="carousel">
    &lt;a class="carousel-item" href="#one!">&lt;img src="https://lorempixel.com/250/250/nature/1">&lt;/a>
    &lt;a class="carousel-item" href="#two!">&lt;img src="https://lorempixel.com/250/250/nature/2">&lt;/a>
    &lt;a class="carousel-item" href="#three!">&lt;img src="https://lorempixel.com/250/250/nature/3">&lt;/a>
    &lt;a class="carousel-item" href="#four!">&lt;img src="https://lorempixel.com/250/250/nature/4">&lt;/a>
    &lt;a class="carousel-item" href="#five!">&lt;img src="https://lorempixel.com/250/250/nature/5">&lt;/a>
  &lt;/div>
      </code></pre>
    </div>

    <!--  Options Section  -->
    <div id="options" class="scrollspy section">
      <h4>jQuery Initialization</h4>
       <pre><code class="language-javascript">
    $(document).ready(function(){
      $('.carousel').carousel();
    });
        </code></pre>
        <br>

        <h4>jQuery Plugin Options</h4>
        <table class="highlight">
          <thead>
            <tr>
                <th>Option Name</th>
                <th>Description</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>duration</td>
              <td>Transition duration in milliseconds. (Default: 200)</td>
            </tr>
            <tr>
              <td>dist</td>
              <td>Perspective zoom. If 0, all items are the same size. (Default: -100)</td>
            </tr>
            <tr>
              <td>shift</td>
              <td>Set the spacing of the center item. (Default: 0)</td>
            </tr>
            <tr>
              <td>padding</td>
              <td>Set the padding between non center items. (Default: 0)</td>
            </tr>
            <tr>
              <td>fullWidth</td>
              <td>Make the carousel a full width slider like the second example. (Default: false)</td>
            </tr>
            <tr>
              <td>indicators</td>
              <td>Set to true to show indicators. (Default: false)</td>
            </tr>
            <tr>
              <td>noWrap</td>
              <td>Don't wrap around and cycle through items. (Default: false)</td>
            </tr>
          </tbody>
        </table>
        <br>

      <h4>jQuery Plugin Methods</h4>
      <p>We have methods to pause, start, move to next and move to previous slide.</p>
      <pre><code class="language-javascript col s12">
// Next slide
$('.carousel').carousel('next');
$('.carousel').carousel('next', 3); // Move next n times.

// Previous slide
$('.carousel').carousel('prev');
$('.carousel').carousel('prev', 4); // Move prev n times.

// Set to nth slide
$('.carousel').carousel('set', 4);

// Destroy carousel
$('.carousel').carousel('destroy');
      </code></pre>
      </div>

      <!--  Slider Section  -->
      <div id="slider" class="scrollspy section">
        <h4>Full Width Slider</h4>
        <p class="caption">Our carousel has a full width option that makes it into a simple and elegant image carousel. You can also have indicators that show up on the bottom of the slider. </p>
        <p>Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.</p><br>

        <div class="carousel carousel-slider">
          <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
          <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
          <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
          <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
        </div><br>

        <pre><code class="language-markup">
  &lt;div class="carousel carousel-slider">
    &lt;a class="carousel-item" href="#one!">&lt;img src="https://lorempixel.com/800/400/food/1">&lt;/a>
    &lt;a class="carousel-item" href="#two!">&lt;img src="https://lorempixel.com/800/400/food/2">&lt;/a>
    &lt;a class="carousel-item" href="#three!">&lt;img src="https://lorempixel.com/800/400/food/3">&lt;/a>
    &lt;a class="carousel-item" href="#four!">&lt;img src="https://lorempixel.com/800/400/food/4">&lt;/a>
  &lt;/div>
        </code></pre>

        <pre><code class="language-javascript">
  $('.carousel.carousel-slider').carousel({fullWidth: true});
        </code></pre>
      </div>

      <!-- Special Options Section  -->
      <div id="special" class="scrollspy section">
        <h4>Special Options</h4>
        <p class="caption">The carousel doesn't only support images but also allows you to make content carousels. You can add fixed items to your carousel by adding a div with the class <code class="language-markup">carousel-fixed-item</code> and adding your fixed content in there.</p>
        <p>Note: This is also touch compatible! Try swiping with your finger to scroll through the carousel.</p>
        <br>

        <div class="carousel carousel-slider center" data-indicators="true">
          <div class="carousel-fixed-item center">
            <a class="btn waves-effect white grey-text darken-text-2">button</a>
          </div>
          <div class="carousel-item red white-text" href="#one!">
            <h2>First Panel</h2>
            <p class="white-text">This is your first panel</p>
          </div>
          <div class="carousel-item amber white-text" href="#two!">
            <h2>Second Panel</h2>
            <p class="white-text">This is your second panel</p>
          </div>
          <div class="carousel-item green white-text" href="#three!">
            <h2>Third Panel</h2>
            <p class="white-text">This is your third panel</p>
          </div>
          <div class="carousel-item blue white-text" href="#four!">
            <h2>Fourth Panel</h2>
            <p class="white-text">This is your fourth panel</p>
          </div>
        </div><br>
        <pre><code class="language-markup">
  &lt;div class="carousel carousel-slider center" data-indicators="true">
    &lt;div class="carousel-fixed-item center">
      &lt;a class="btn waves-effect white grey-text darken-text-2">button&lt;/a>
    &lt;/div>
    &lt;div class="carousel-item red white-text" href="#one!">
      &lt;h2>First Panel&lt;/h2>
      &lt;p class="white-text">This is your first panel&lt;/p>
    &lt;/div>
    &lt;div class="carousel-item amber white-text" href="#two!">
      &lt;h2>Second Panel&lt;/h2>
      &lt;p class="white-text">This is your second panel&lt;/p>
    &lt;/div>
    &lt;div class="carousel-item green white-text" href="#three!">
      &lt;h2>Third Panel&lt;/h2>
      &lt;p class="white-text">This is your third panel&lt;/p>
    &lt;/div>
    &lt;div class="carousel-item blue white-text" href="#four!">
      &lt;h2>Fourth Panel&lt;/h2>
      &lt;p class="white-text">This is your fourth panel&lt;/p>
    &lt;/div>
  &lt;/div>
        </code></pre>
        <pre><code class="language-javascript">
  $('.carousel.carousel-slider').carousel({fullWidth: true});
        </code></pre>
      </div>

    </div>




    <!-- Table of Contents -->
    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#introduction">Introduction</a></li>
            <li><a href="#options">Options</a></li>
            <li><a href="#slider">Full Width Slider</a></li>
            <li><a href="#special">Special Options</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>
